<!--  -->
<template>
  <div class="proofread-list-wrap list-colum-width">
    <div
      class="proofread-item list-colum-width"
      v-for="item in renderData"
      @click="itemClickHandle(item)"
      :key="item.id"
    >
      <div>
        <p
          class="main-grammar"
          :class="{
            'grammar-hidden': item.clickNum >= 1 && item.clickNum % 2 === 1,
          }"
        >
          <span>{{ item.title }}</span>
          <img class="play-btn" src="@/assets/reverse/audio-play.png" alt="" />
        </p>
        <p
          class="main-grammar"
          :class="{ 'grammar-hidden': item.clickNum === 0 }"
        >
          {{ item.translation }}
        </p>
      </div>
    </div>
    <div class="list-colum-width"></div>
    <div class="list-colum-width"></div>
  </div>
</template>

<script>
export default {
  name: "studyList",
  components: {},
  data() {
    return {
      audio: {},
    };
  },
  props: {
    renderData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {},
  watch: {},
  methods: {
    itemClickHandle(item) {
      let n = item.clickNum ? item.clickNum + 1 : 1;
      this.$set(item, "clickNum", n);
      if (item.voice) {
        this.audio.src = item.voice;
        this.audio.play();
      }
    },
  },
  created() {},
  mounted() {
    this.audio = document.getElementById("reverse-audio");
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    this.audio.src = "";
  },
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */

.proofread-list-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;

  .proofread-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px;
    background-color: #fff;
    border-radius: 10px;
    text-align: left;
    margin-bottom: 20px;
    font-size: 25px;
    width: 750px;
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: 0px 0px 10px rgba(39, 191, 163, 0.5);
    }
    .main-grammar {
      &.grammar-hidden {
        visibility: hidden;
      }
    }

    .play-btn,
    .translate-btn {
      width: 20px;
      height: 20px;
      margin-left: 20px;
    }
  }
  @media screen and (max-width: 1200px) {
    .proofread-item {
      margin-right: 0 !important;
    }
  }
}
</style>
